<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper.min.css">
    <style>
      html,body,ul{margin: 0;padding: 0;}
      html,body{position:relative;height:100%;}
      body{font-size: 0.28rem;}
      li{list-style:none;}
      #app .header{position:absolute;top:0;z-index:5;width:100%;background:#fff;}
      #app .content{position: absolute;top:0;left: 0;bottom: 0;right:0;}
      #app .nav {border-bottom:1px solid #ebebeb;}
      #app .nav .swiper-slide{width: auto;}
      #app .nav .swiper-slide>div{text-align:center;line-height: 2.5;margin: 0 .28rem;}
      #app .nav .bar {min-width:50px;height:3px;position:absolute;bottom:0px;}
      #app .nav .bar .color {width:70%;margin:0 auto;height:3px;background:#ff4891;}
      #app .nav .cur-nav-item{color: #ff4891;}
      #app .page{height: 100%;}
      #app .page .slidepage{height: 100%;}
      #app .scroll{height: 100%;}
    </style>
</head>
<body>
    <div id="app">
      <div class="header">
        <div class="swiper-container nav">
          <div class="swiper-wrapper">
            <div class="swiper-slide cur-nav-item"><div r-link="#/home">热卖热卖热卖</div></div>
            <div class="swiper-slide"><div r-link="#/fruit">水果</div></div>
            <div class="swiper-slide"><div r-link="#/dairy">乳品</div></div>
            <div class="swiper-slide"><div r-link="#/snacks">零食</div></div>
            <div class="swiper-slide"><div r-link="#/home">肉蛋</div></div>
            <div class="swiper-slide"><div r-link="#/ss">蔬菜</div></div>
            <div class="swiper-slide"><div r-link="#/a">酒饮</div></div>
            <div class="swiper-slide"><div r-link="#/d">速食</div></div>
            <div class="swiper-slide"><div r-link="#/q">熟食</div></div>
            <div class="swiper-slide"><div r-link="#/w">水产</div></div>
            <div class="swiper-slide"><div r-link="#/e">粮油</div></div>
            <div class="swiper-slide"><div r-link="#/r">轻食</div></div>
            <div class="bar">
              <div class="color"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="swiper-container page">
          <div class="swiper-wrapper">
            <div class="swiper-slide slidepage">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide slidescroll">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus, ex eu sagittis faucibus, ligula ipsum sagittis magna, et imperdiet dolo</div></div>
              </div>
            </div>
            <div class="swiper-slide slidepage">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide slidescroll">slide2</div></div>
              </div>
            </div>
            <div class="swiper-slide slidepage">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide slidescroll">slide3</div></div>
              </div>
            </div>
            <div class="swiper-slide slidepage">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide slidescroll">slide4</div></div>
              </div>
            </div>
            <div class="swiper-slide slidepage">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide slidescroll">slide5</div></div>
              </div>
            </div>
            <div class="swiper-slide slidepage">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide slidescroll">slide6</div></div>
              </div>
            </div>
            <div class="swiper-slide slidepage">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide slidescroll">slide7</div></div>
              </div>
            </div>
            <div class="swiper-slide slidepage">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide slidescroll">slide8</div></div>
              </div>
            </div>
            <div class="swiper-slide slidepage">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide slidescroll">slide9</div></div>
              </div>
            </div>
            <div class="swiper-slide slidepage">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide slidescroll">slide10</div></div>
              </div>
            </div>
            <div class="swiper-slide slidepage">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide slidescroll">slide11</div></div>
              </div>
            </div>
            <div class="swiper-slide slidepage">
              <div class="swiper-container scroll">
                <div class="swiper-wrapper">
                  <div class="swiper-slide slidescroll">slide12</div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <script src="../flexible.js"></script>
    <script src="./swiper.min.js"></script>
    <script>
      let page = {
          duration:300
          ,navSwiperIns:null
          ,tabSwiperIns:null
      }

      page.navOptions = function(options){
        let _self = this
        return {
          slidesPerView: 'auto',
          freeMode: true,
          on: {
            init: function() {
              this.$bar = this.$el.find('.bar')
              this.navWidth = function(){
                let navWidth = 0;
                for(let i = 0,len = this.slides.length; i < len; i++){
                    navWidth += this.slides[i].offsetWidth;
                }
                return navWidth;
              }.call(this);
              let barWidth = flexible.px2rem(this.slides[0].offsetWidth)
              this.$bar.css('width', barWidth+'rem').transition(_self.duration);
            }
          }
        }
      }

      page.tabOptions = function(){
        let _self = this,$ = page.$ 
        return {
          watchSlidesProgress: true,
          resistanceRatio: 0,
          on:{
            transitionStart:function(){
              let activeIndex = this.activeIndex
              ,navSwiper = _self.navSwiperIns
              ,slide = navSwiper.slides[activeIndex]
              //释放时导航粉色条移动过渡
              navSwiper.$bar.transition(_self.duration).transform('translateX(' +flexible.px2rem(slide.offsetLeft)+ 'rem)')
              navSwiper.$bar.css('width', flexible.px2rem(slide.offsetWidth)+'rem')
              $(navSwiper.slides).removeClass('cur-nav-item').eq(activeIndex).addClass('cur-nav-item')

              //导航居中
              let setCurNavCenter = function(swiperIns,curIndex){
                swiperIns.setTransition(300);
                let curNavOffsetLeft = swiperIns.slides[curIndex].offsetLeft
                , clientWidth = parseInt(swiperIns.$wrapperEl.css('width'))
                , slideWidth = swiperIns.slides[curIndex].offsetWidth
                , navWidth = navSwiper.navWidth;
                if(curNavOffsetLeft <= (clientWidth-slideWidth)/2 ){
                    swiperIns.setTranslate(0)
                }else{
                    if(curNavOffsetLeft > navWidth - (slideWidth+clientWidth)/2){
                      navSwiper.setTranslate(clientWidth - navWidth)
                    }else{
                      navSwiper.setTranslate((clientWidth - slideWidth)/2 - curNavOffsetLeft)
                    }
                }
              }
              setCurNavCenter(_self.navSwiperIns,activeIndex)
            }
          }
        }
      }

      page.scrollOptions = function(){
        return {
          direction: 'vertical',
          freeMode: true,
          slidesPerView: 'auto',
          mousewheel:true
        }
      }

      page.initSwiper = function(container,options){
        let swiperIns = new Swiper(container,options);
        !this.$ && (this.$ = swiperIns.$)
        return swiperIns;
      }

      page.evtBind = function(){
        let _self = this
        this.navSwiperIns.$el.on('touchstart', function(e) {
          e.preventDefault();
        })
        this.navSwiperIns.on('tap',function(e){
          _self.tabSwiperIns.slideTo(this.clickedIndex, _self.duration,false);
        })
      }

      page.ready = function(){
        let header = document.querySelectorAll(".header")[0] || document.querySelectorAll(".bar-nav")[0]
        header && (document.querySelectorAll('.content')[0].style.top = flexible.px2rem(header.offsetHeight)+'rem')
        this.navSwiperIns = this.initSwiper('.nav',page.navOptions());
        this.tabSwiperIns = this.initSwiper('.page',page.tabOptions());
        this.scrollSwiperIns = this.initSwiper('.scroll',page.scrollOptions());
        this.evtBind();
      }.call(page)    
    </script>
</body>
</html>